<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- canvas 画布 -->
    <canvas id="myid" width="500" height="500"></canvas>
    <script>
      // 加载一张图片 ，然后通过画布绘制到页面上。
      // 1.加载一张图片  2.加载图片需要时间，绘制图片的时候需要等到图片加载完毕；

      // 1.加载图片的函数
      // src 是图片的地址；
      // 2.绘制图片
      function drawImageFn(imgEle) {
        // 绘制图片
        let canvas = document.querySelector("#myid"); // 获取canvas 画布
        let ctx = canvas.getContext("2d"); // 获取画布里的画笔，上下文
        ctx.drawImage(imgEle, 0, 0); // 把图片对象绘制到画布上， 后面的参数是起始坐标位置
      }

      function loadImg(src, cb) {
        return new Promise((resolve, reject) => {
          // 创建一个img标签
          let imgEle = document.createElement("img");
          imgEle.src = src;
          // 如果图片加载完毕了，那么js里会执行一个 onload事件
          imgEle.onload = function () {
            // 可以获取图片了，图已经加载好了。   加载图片是一个异步过程
            console.log("图片加载完毕了");
            cb && cb(imgEle); // 回调函数
            resolve(imgEle);
          };
          imgEle.onerror = function () {
            // 图片加载错误的时候会执行；
            reject("图片加载失败");
          };
        });
      }

      //   loadImg(
      //     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666333120&t=b1ca09200b10638ce39168c3c7542a40"
      //   );
      // console.log('绘制图片');

      let strur1 =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666333120&t=b1ca09200b10638ce39168c3c7542a40";
      // loadImg(strur1, function (imgEle) {
      //   // imgEle形参
      //   // console.log("绘制图片");
      //   drawImageFn(imgEle); // imgEle 函数内的形参
      // });

      // 2.promise控制异步的执行顺序   //return有Promise的函数也有 then方法
      loadImg(strurl).then(
        (res) => {
          drawImageFn(res);
        },
        (err) => {
          console.log(err);
        }
      );
    </script>
  </body>
</html>
